<template>
  <div class="main_box">
    <el-row class="boxRow">
      <el-col class="boxMain" :class="isView && pieSet.nineParam == null ? 'not_config' : ''">
        <div v-if="isView && pieSet.nineParam != null">
          <!-- <div class="configured" @click="setDeploy('nineParam')">已配置</div> -->
        </div>
        <div class="deploy" v-if="!isView">
          <div class="text-white configure_title">堆叠图</div>
          <el-button type="primary" size="small" @click="setDeploy('nineParam', pieSet.nineParam)">配 置</el-button>
        </div>
        <div v-if="pieSet.nineParam != null" id="chart-data" class="my_chart"></div>
      </el-col>
      <el-col class="boxMain" :class="isView && pieSet.tenParam == null ? 'not_config' : ''">
        <div v-if="isView && pieSet.tenParam != null">
          <!-- <div class="configured" @click="setDeploy('tenParam')">已配置</div> -->
        </div>
        <div class="deploy" v-if="!isView">
          <div class="text-white configure_title">饼状图</div>
          <el-button type="primary" size="small" @click="setDeploy('tenParam', pieSet.tenParam)">配 置</el-button>
        </div>
        <div v-if="pieSet.tenParam != null" id="pie-first" class="my_chart"></div>
      </el-col>
      <el-col class="boxMain lastLine" :class="isView && pieSet.eleParam == null ? 'not_config' : ''">
        <div v-if="isView && pieSet.eleParam != null">
          <!-- <div class="configured" @click="setDeploy('eleParam')">已配置</div> -->
        </div>
        <div class="deploy" v-if="!isView">
          <div class="text-white configure_title">饼状图</div>
          <el-button type="primary" size="small" @click="setDeploy('eleParam', pieSet.eleParam)">配 置</el-button>
        </div>
        <div v-if="pieSet.eleParam != null" id="pie-second" class="my_chart"></div>
      </el-col>
    </el-row>
    <deployDialog ref="deployDialog" @onSave="refresh"></deployDialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import charts from './chart.js'
import deployDialog from './dialog/deployDialog.vue'
import { queryDeviceRealBZT, queryDeviceYDL } from "@/api/showManage/index"
export default {
  components: {
    deployDialog,
  },
  props: {
    isView: { //展示还是配置
      type: Boolean,
      default: () => true
    },
    configured: {
      // 已配置
      type: Array,
      default: () => []
    },
    tableData: {
      // 配置弹窗表格数据
      type: Array,
      default: () => []
    },
    pieSet: {
      //获取数据的配置参数params
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      showNum: 0,
      setNum: '',
    }
  },
  created() {
    this.setTime()
  },
  mounted() {
    // this.getOne()
    this.getData()
  },
  beforeDestroy() {
    clearInterval(this.timeInterval)
    this.timeInterval = null
  },
  methods: {
    setTime() {
      this.timeInterval = setInterval(() => {
        this.getData()
      }, 3000)
    },
    getOne() {
      charts.dataEchart()
      charts.pieEchart('pie-first')
      charts.pieEchart('pie-second')
    },
    getData() {
      Object.keys(this.pieSet).forEach((key) => {
        if (this.pieSet[key] != null) {
          this.getPar(1, key)
        }
      })
    },
    getPar(type, key, url) {
      let obj = {
        deviceCode: this.$route.query.deviceCode,
      }
      obj.params = type == 1 ? this.pieSet[key] : url
      let result = key == 'nineParam' ? queryDeviceYDL : queryDeviceRealBZT
      result(obj).then(res => {
        if (key == 'nineParam') {
          charts.dataEchart(res.object.data)
        } else {
          let id = key == 'tenParam' ? 'pie-first' : 'pie-second'
          charts.pieEchart(id, res.object.valueData)
        }
      })
    },
    setDeploy(par,data) {
      this.setNum = par
      this.$refs.deployDialog.setPar = par
      this.$refs.deployDialog.isView = false
      this.$refs.deployDialog.tableData = this.tableData
      if(data) {
        let newList = data.split("&")
        this.$refs.deployDialog.getList2(newList)
      }

      this.$refs.deployDialog.dialogVisible = true
    },
    refresh(url) {
      // this.getPar(2, this.setNum, url)
    },
  }
}
</script>

<style lang="scss" scoped>
.configure_title {
  position: absolute;
  top: 10px;
  left: 10px;
}

.main_box {
  height: 42%;
}

.boxRow {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0;
}

.boxMain {
  border-radius: 8px;
  margin-right: 20px;
  background-color: #fff;
  width: calc((100% - 40px)/3);
  height: 100%;
  border: 1px solid #EBEEF5;
  padding: 8px 0;
  position: relative;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03);
}

.lastLine {
  margin-right: 0 !important;
}

.my_chart {
  // height: 260px;
  // width: 100%;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  height: 100%;
}

.tab {
  display: flex;
  align-items: center;
  width: 100%;
}

.tab_title {
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}

.text-warning {
  color: #ff9933;
  text-align: center;
  margin-top: 10px;
}

.box_info {
  display: flex;
  flex-wrap: wrap;
  padding: 0 12px;

  span {
    color: #9a9a9a;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .tab_title {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}

.text {
  color: #666666;
}

.deploy {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 199;
  opacity: 0.9;
  background-color: #b2b2b2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.configured {
  font-family: 'SourceHan';
  text-align: right;
  margin-right: 8px;
  color: #3276ff;
  cursor: pointer;
}

.not_config {
  background-image: url('../../../../../../assets/img/dataDel.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}
</style>
